<template>
	<view class="card-box ss-flex-col ss-col-center">
		<view class="money">{{total}}</view>
		<view class="money-txt">团队总人数</view>
		<view class="org ss-flex-row ss-row-between ss-col-center ss-m-t-70 w-100">
			<view class="item ss-flex-col ss-row-center ss-col-center">
				<view class="label text-c-c">BD</view>
				<view class="amount">{{bd}}</view>
			</view>
			<view class="item ss-flex-col ss-row-center ss-col-center">
				<view class="label text-c-c">BDM</view>
				<view class="amount">{{bdm}}</view>
			</view>
			<view class="item ss-flex-col ss-row-center ss-col-center">
				<view class="label">
					<view class="label-txt text-c-c font-30">街道</view>
					<view class="label-txt text-c-c font-26">服务商</view>
				</view>
				<view class="amount">{{street}}</view>
			</view>
			<view class="item ss-flex-col ss-row-center ss-col-center">
				<view class="label">
					<view class="label-txt text-c-c font-30">区县</view>
					<view class="label-txt text-c-c font-26">服务商</view>
				</view>
				<view class="amount">{{district}}</view>
			</view>
			<view class="item ss-flex-col ss-row-center ss-col-center">
				<view class="label">
					<view class="label-txt text-c-c font-30">地市</view>
					<view class="label-txt text-c-c font-26">服务商</view>
				</view>
				<view class="amount">{{city}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		onMounted
	} from 'vue';
	import sheep from '@/sheep';
	const props = defineProps({
		data: {
			type: Object,
			default: {},
		}
	})
	
	const total = computed(()=>{
		if(props.data&&props.data.children){
			return props.data.children.total;
		}else{
			return 0;
		}
		
	})
	
	const district = computed(() => {
		if (props.data && props.data['区县服务商']) {
			return props.data['区县服务商'].total;
		} else {
			return 0;
		}
	});
	
	const city = computed(() => {
		if (props.data && props.data['城市服务商']) {
			return props.data['城市服务商'].total;
		} else {
			return 0;
		}
	});
	
	
	const bd = computed(() => {
		if (props.data && props.data['DB']) {
			return props.data['DB'].total;
		} else {
			return 0;
		}
	});
	
	const bdm = computed(() => {
		if (props.data && props.data['BDM']) {
			return props.data['BDM'].total;
		} else {
			return 0;
		}
	});
	
	const street = computed(() => {
		if (props.data && props.data['街道服务商']) {
			return props.data['街道服务商'].total;
		} else {
			return 0;
		}
	});
	
	onMounted(() => {
		console.log('districtAmount:', props.data)
	})
</script>

<style lang="scss">
	.card-box{
		width:calc(100% - 23rpx - 23rpx - 19rpx - 25rpx);
		margin:20rpx 23rpx 20rpx 23rpx ;
		padding:9rpx 25rpx 21rpx 19rpx;
		height: 320rpx;
		border-radius: 10rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
		.money{
			
			height: 70rpx;
			font-family: Source Han Sans;
			font-size: 48rpx;
			font-weight: 350;
			line-height: normal;
			text-align: center;
			letter-spacing: normal;
			color: #000000;
		}
		.money-txt{
			height: 46rpx;
			font-family: Source Han Sans;
			font-size: 32rpx;
			font-weight: 350;
			line-height: normal;
			letter-spacing: normal;
			color: #000000;
		}
	}
	
	.w-100{
		width:100%;
	}
	
	.item{
		width: 126rpx;
		height: 150rpx;
		.label{
			height:81rpx;
			font-family: Source Han Sans;
			font-weight: 350;
			line-height: normal;
			letter-spacing: normal;
			color: #000000;
		}
		.amount{
			margin-top:12rpx;
			height:46rpx;
			font-family: Source Han Sans;
			font-size: 32rpx;
			font-weight: 350;
			line-height: normal;
			color: #3D3D3D;
		}
	}
	
	.font-26{
		font-size: 26rpx;;
	}
	.font-30{
		font-size: 30rpx;
	}
	
	.text-c-c{
		display:flex;
		justify-content: center;
		align-items:center;
	}
	.text-c-end{
		display:flex;
		flex-direction: row;
		justify-content: center;
		align-items:flex-end;
	}
	
</style>
